<template>
  <view class="wrap" :style="{height:screenHeight+'px'}">
     <top-tab tabTitle="我的代理" @backClick="backClick" backColor="#5B2177"/>
		 <view class="main">
			<view class="money-deposit">
				<view class="deposit-record">
					<view>可提现用余额</view>
					<view>提现记录</view>
				</view>
				<view class="btn-num">
					<view class="numbel">￥185.00</view>
					<view class="btn-deposit" @click="deposit">提现</view>
				</view>
			</view>
			<view class="agency-sub">
				<view class="icon-title">
					<view class="iconfont">&#xe694;</view>
					<view class="title">代理说明</view>
				</view>
				<view class="iconfont" style="color:#808080;">&#xe646;</view>
			</view>
			<view class="agency-sub" @click="myLevel">
				<view class="icon-title">
					<view class="iconfont">&#xe620;</view>
					<view class="title">我的下级</view>
				</view>
				<view class="iconfont" style="color:#808080;">&#xe646;</view>
			</view>
			<view class="agency-sub" @click="account">
				<view class="icon-title">
					<view class="iconfont">&#xe654;</view>
					<view class="title">下级开户</view>
				</view>
				<view class="iconfont" style="color:#808080;">&#xe646;</view>
			</view>
		 </view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
  export default {
		components: { topTab },
    data() {
      return {
				screenHeight: uni.getSystemInfoSync().screenHeight, // 屏幕高度
			}
    },
  onShow() {},
  methods: {
		// 我的下级
		myLevel() {
			uni.navigateTo({
				url: '/pages/my/agency/my_level'
			})
		},
		// 下级开户
		account() {
			uni.navigateTo({
				url: '/pages/my/agency/level_account'
			})
		},
		// 我的钱包
		deposit() {
			uni.navigateTo({
				url: '/pages/my/agency/wallet'
			})
		},
		// 返回上一页
		backClick() {
			uni.switchTab({
			    url: '/pages/my/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.wrap{
		background: #F2F2F2;
				
		.main{
			padding: 24rpx;
			.money-deposit{
				width: 100%;
				// height: 184px;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 50rpx 40rpx 50rpx 30rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				.deposit-record{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-bottom: 17rpx;
				}
				.btn-num{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.numbel{
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #EE4242;
					}
					.btn-deposit{
						width: 120rpx;
						height: 44rpx;
						background: #B743ED;
						border-radius: 10rpx;
						line-height: 44rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
			.agency-sub{
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 0 36rpx 0 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.icon-title{
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					.iconfont{
						font-size: 40rpx;
						color: #B83DF1;
						margin-right: 25rpx;
					}
				}
			}
		}
	}
</style>
